<template>
  <defs>
    <marker
      id="triangle-start"
      refX="1"
      refY="4"
      markerWidth="9"
      markerHeight="8"
      orient="auto"
      markerUnits="strokeWidth"
      :fill="fill"
    >
      <polyline points="0,4 9,0 9,8 0,4" />
    </marker>
    <marker
      id="triangle-end"
      refX="8"
      refY="4"
      markerWidth="9"
      markerHeight="8"
      orient="auto"
      markerUnits="strokeWidth"
      :fill="fill"
    >
      <polyline points="0,0 9,4 0,8 0,0" />
    </marker>
    <!-- 设置关联时的箭头 -->
    <marker
      id="triangle-start-line"
      refX="1"
      refY="4"
      markerWidth="9"
      markerHeight="8"
      orient="auto"
      markerUnits="strokeWidth"
      :fill="lineFill"
    >
      <polyline points="0,4 9,0 9,8 0,4" />
    </marker>
    <marker
      id="triangle-end-line"
      refX="8"
      refY="4"
      markerWidth="9"
      markerHeight="8"
      orient="auto"
      markerUnits="strokeWidth"
      :fill="lineFill"
    >
      <polyline points="0,0 9,4 0,8 0,0" />
    </marker>
    <!-- 重设关联时的箭头 -->
    <marker
      id="triangle-start-reselect"
      refX="1"
      refY="4"
      markerWidth="9"
      markerHeight="8"
      orient="auto"
      markerUnits="strokeWidth"
      fill="#F82418"
    >
      <polyline points="0,4 9,0 9,8 0,4" />
    </marker>
    <marker
      id="triangle-end-reselect"
      refX="8"
      refY="4"
      markerWidth="9"
      markerHeight="8"
      orient="auto"
      markerUnits="strokeWidth"
      fill="#F82418"
    >
      <polyline points="0,0 9,4 0,8 0,0" />
    </marker>
  </defs>
</template>

<script>
export default {
  props: {
    fill: String,
    lineFill: String
  }
}
</script>

<style>
</style>